<template>
  <div>
    <div class="control_filter_wrap" style="background-color: #f8f8f8">
      <van-row>
        <van-col span="6">
          <dropDown :title="'教练榜'" :popup-options="topListdict" :popup-title="'请选择榜单'" @onFinish="onFinishType" />
        </van-col>
        <van-col span="6">
          <dropDown :title="'性别'" :popup-options="genderList" :field-names="dictFieldNames" :popup-title="'请选择性别'" @onFinish="onFinishGender" />
        </van-col>
        <van-col offset="6" span="6" align="right">
          <search @onFinish="onFinishSearch" />
        </van-col>
      </van-row>
    </div>

    <van-list
      v-model="tableLoading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <li v-for="(item, index) in tableData" :key="index" class="model_content_first model_content gl_clear">
          <div class="integral_left gl_fl">
            <span class="integral_rank">{{ item.finalRank }}</span>
            <img class="integral_photo" :src="getStaticFileUrl(item.photoUrl)" @error="errorPhoto">
          </div>
          <div class="integral_info">
            <div class="integral_info_name">
              <span class="gl_mr_15">{{ item.name }} </span>
              <span style="font-size:12px">{{ item.gender }}</span>
            </div>
            <div class="integral_info_address">
              <img class="address_icon" src="@/assets/images/league/mb_delegation.png" alt="">
              <span class="address_text gl_ellipsis">{{ item.organization }}</span>
            </div>
            <div class="info_gold">
              <div>
                <img class="img_gold" src="@/assets/images/league/mb_gold.png">
                <span class="txt_gold">{{ item.subRankList[0] ? item.subRankList[0].subRankCount : '' }}</span>
              </div>
              <div>
                <img class="img_gold" src="@/assets/images/league/mb_silver.png">
                <span class="txt_gold">{{ item.subRankList[1] ? item.subRankList[1].subRankCount : '' }}</span>
              </div>
              <div>
                <img class="img_gold" src="@/assets/images/league/mb_bronze.png">
                <span class="txt_gold">{{ item.subRankList[2] ? item.subRankList[2].subRankCount : '' }}</span>
              </div>
            </div>
            <div>
              <span class="integral_info_score">总分 <span style="font-weight: 500">{{ item.finalPoints }}</span></span>
            </div>
            <div class="integral_info_record gl_mb_5 gl_clear">
              <div class="gl_fl">
                <img class="integralPercent_icon" src="@/assets/images/league/mb_percent.png" alt="">
                <!-- <span class="integral_text">{{ (item.winPercent * 100).toString().match(/^\d+(?:\.\d{0,2})?/)[0] + '%' }}</span> -->
                <span class="integral_text">{{ item.winPercent ? Math.round(item.winPercent * 100) + '%' : '--' }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import dropDown from '../components/dropDown.vue';
import search from '../components/search.vue';
import {
  api_GET_EventsManagementEventResultUnifiedPointRankList
} from '@/extend/api/gameswaggerApi/app';

import {
  Api_GET_EventsManagementEventResultUnifiedPointRankListQO
} from '@/lib/form/game/swaggerForm';

import defaultPhoto from '@/assets/images/face_default.png';

export default {
  components: {
    dropDown,
    search
  },
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      defaultPhoto: defaultPhoto, // 默认照片
      pageLoading: false,
      tableLoading: false,
      finished: false,
      error: false,
      qo: new Api_GET_EventsManagementEventResultUnifiedPointRankListQO(),
      total: 0,
      tableData: [],
      dictFieldNames: {
        text: 'value',
        value: 'code',
        children: 'children'
      },
      topListType: 'Coach',
      topListdict: [
        {
          text: '教练榜',
          value: 'Coach'
        },
        {
          text: '领队榜',
          value: 'Leader'
        }
      ]
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict
    }),
    genderList() {
      const _gender = (this.dict && this.dict.dictGender) || [];
      return [
        {
          value: '全部',
          code: null
        },
        ..._gender
      ];
    }
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList(1);
        }
      }
    }
  },
  methods: {
    onLoad() {
      let _page = this.qo.Page || 1;
      _page++;
      this.qo.Page = _page;
      this.getPageList(_page);
    },
    // 获取页面数据
    getPageList (page) {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      _qo.Page = page || 1;
      _qo.SkipCount = (_qo.Page - 1) * _qo.MaxResultCount;
      _qo.CompetitionId = this.gameInfo.id;
      _qo.Type = this.topListType || 'Coach';
      _qo.IncludeFinal = true;
      _qo.IncludeSubRank = true;
      console.log('_qo: ', _qo);
      this.qo.Page = _qo.Page;
      this.apiRankList(_qo);
    },
    // UnifiedPointRankList
    apiRankList(qo) {
      this.tableLoading = true;
      api_GET_EventsManagementEventResultUnifiedPointRankList(qo)
        .then(
          res => {
            this.tableLoading = false;
            this.total = res.totalCount;

            // 如果是第一页，表示需要覆盖整个内面内容，
            // 如果不是第一页，表示滑动加载的内容，需要push
            const _this = this;
            if (_this.qo.Page <= 1) {
              this.tableData = res.items;
            } else {
              this.tableData.push(...res.items);
            }

            // 数据全部加载完成
            if (this.tableData.length >= this.total) {
              this.finished = true;
            }
          }
        )
        .catch(
          error => {
            this.error = true;
            this.tableLoading = false;
            console.log(error);
          }
        );
    },
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    onFinishGender (data) {
      console.log(data);
      const _gender = (data && data[0]) || null;
      this.qo.GenderCode = _gender.code;
      this.getPageList(1);
    },
    onFinishSearch (data) {
      this.qo.Keyword = data;
      this.getPageList(1);
    },
    onFinishType (data) {
      const _type = (data && data[0]) || null;
      this.topListType = _type.value;
      this.getPageList(1);
    }
  }
};
</script>

<style lang="scss" scoped>
  .control_filter_wrap {
    padding: 10px 20px;
  }
</style>

<style lang="scss" scoped>
.main_content .model_content {
  margin-bottom: 5px;
}
.model_content_first {
  padding: 18px 7px 18px 7px;
}
.integral_left {
  display: flex;
  align-items: center;
}
.model_content_first .integral_left{
  padding-top: 8px;
}
.integral_info {
  margin-left: 108px;
}

.integral_info_name {
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  color: #000;
  line-height: 21px;
}
.model_content_first .integral_info_name {
  margin-bottom: 3px;
}
.integral_info_address {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 19px;
  margin-bottom: 5px;
}
.integral_info_score {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  line-height: 21px;
  color: #c28e00;
  letter-spacing: 0px;
}
.model_content_first .integral_info_score {
  padding: 1px 8px;
  line-height: 19px;
  background: #fff3d1;
  border-radius: 5px;
  margin-bottom: 10px;
}
.integral_info_record {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
}

.integral_rank {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 18px;
  color: #E02020;
  text-align: center;
  background-color: #ffe7e7;
  border-radius: 50%;
}
.model_content_first .integral_rank {
  margin-top: 0;
}
.integral_photo {
  width: 70px;
  height: 80px;
  border-radius: 4px;
}
.title_control {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
}
.intergral_more_img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.address_icon {
  width: 16px;
  height: 14px;
  margin-right: 9px;
  vertical-align: top;
}
.address_text {
  width: calc(100% - 30px);
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 19px;
}
.integralResult_icon {
  width: 17px;
  height: 18px;
  margin-right: 6px;
  vertical-align: top;
}
.integralPercent_icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: top;
}
.integral_text {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 20px;
}
.integral_text.result {
  width: 100px;
}
// 奖牌
  .info_gold {
    display: flex;
    padding-right: 30px;
    margin-bottom: 10px;
    justify-content: space-between;
  }
  .img_gold {
    width: 13px;
    height: 19px;
    vertical-align: top;
    margin-right: 8px;
  }
  .txt_gold {
    display: inline-block;
    min-width: 26px;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #666666;
    line-height: 20px;
    vertical-align: top;
  }
</style>
